import { useState } from 'react'
// useState 在 Toggle 在切换组件提供便利
// ahooks hooks函数库
import {useToggle,useRequest} from 'ahooks'
import Mock from 'mockjs'
// getUsername 自己去请求数据 
function App() {
  const [state, {toggle}] = useToggle()
  // 封装 
  // hooks 高阶函数 
  function getUsername() {
    return new Promise((resolve) => {
      setTimeout(() => {
        // resolve('gch') 
        resolve(Mock.mock('@cname')) // 随机中文名字 @name 随机英文名字                             
      },5000)
    })
  }
  const {data,error,loading} = useRequest(getUsername)
  if(error) {
    return <div>failed to load</div>
  }
  if(loading) {
    return <div>loading ...</div>
  }
  return (
    <div className="App">
      <p>Current Boolean:{String(state)}</p>
      <button onClick={() => toggle()}>Toggle</button>
      <p>Username:{data}</p>
    </div>
  )
}

export default App
